<template>
  <div>
    <div class="banner container-fuild text-center">物流</div>
    <div class="main">
      <!-- 顶部卡片 -->
      <div class="top">
        <el-card class="box-card1">
          <div slot="header"
               class="clearfix">
            <span class="header_text">{{original === 2 || original === 1 ? item.product_name : '-'}}</span>
            <el-input v-model="searchinput"
                      placeholder="请输入运输号或舱位号"
                      @keyup.enter.native="search"></el-input>
            <el-button type="primary"
                       @click="search">搜索</el-button>
          </div>
          <div class="text item">
            <el-descriptions class="margin-top"
                             :column="4"
                             :size="size"
                             border>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  出发地
                </template>
                {{original === 2 || original === 1 ? item.start_point_name : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  目的地
                </template>
                {{original === 2 || original === 1 ? item.end_point_name : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  计划出发时间
                </template>
                {{original === 2 || original === 1 ? item.etd_time : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  计划到达时间
                </template>
                {{original === 2 || original === 1 ? item.eta_time : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  实际出发时间
                </template>
                1111
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  运输方式
                </template>
                {{original === 2 || original === 1 ? item.product_type : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  运输号
                </template>
                {{original === 2 || original === 1 ? item.trans_name : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  运输费用
                </template>
                {{original === 2 || original === 1 ? item.total_price : '-'}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-user"></i> -->
                  代运商
                </template>
                {{original === 2 || original === 1 ? item.company_name : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-mobile-phone"></i> -->
                  代运商代码
                </template>
                {{original === 2 || original === 1 ? item.company_code : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  电话
                </template>
                {{original === 2 || original === 1 ? item.company_finance_iphone : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  业务人
                </template>
                {{original === 2 || original === 1 ? item.company_finance_user : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-location-outline"></i> -->
                  承运商
                </template>
                {{original === 2 || original === 1 ? item.carrier_name : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-tickets"></i> -->
                  承运商代码
                </template>
                {{original === 2 || original === 1 ? item.carrier_code : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  电话
                </template>
                {{original === 2 || original === 1 ? item.carrier_finance_iphone : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  业务人
                </template>
                {{original === 2 || original === 1 ? item.carrier_finance_user : '-'}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  取货地址
                </template>
                {{original === 2 || original === 1 ? item.start_address : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  收货地址
                </template>
                {{original === 2 || original === 1 ? item.end_address : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  电话
                </template>
                {{original === 2 || original === 1 ? item.owner_iphone : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-location-outline"></i> -->
                  货主
                </template>
                {{original === 2 || original === 1 ? item.owner_name : '-'}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  箱量
                </template>
                {{original === 2 || original === 1 ? item.product_num : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  毛重(/KGS)
                </template>
                {{original === 2 || original === 1 ? item.product_weight : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-office-building"></i> -->
                  体积(/CBM)
                </template>
                {{original === 2 || original === 1 ? item.product_volume : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-location-outline"></i> -->
                  价格(/T)
                </template>
                {{original === 2 || original === 1 ? item.product_price : '-'}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <!-- <i class="el-icon-location-outline"></i> -->
                  备注
                </template>
                {{original === 2 || original === 1 ? item.remark : '-'}}
              </el-descriptions-item>

            </el-descriptions>
          </div>
        </el-card>
      </div>
      <div class="foot">
        <el-card class="box-card2">
          <el-timeline class="timeline">
            <el-timeline-item size="large"
                              :color="item.actual_time ? '#88d18a' : '#7db9ff'"
                              :icon="item.actual_time ? 'el-icon-check' : 'el-icon-more' "
                              :timestamp="item.actual_time">
              离开出发地
            </el-timeline-item>
            <el-timeline-item size="large"
                              :color="timeline_color(item)"
                              :icon="timeline_icon">
              运输途中
            </el-timeline-item>
            <el-timeline-item size="large"
                              :color="item.order_status === '3' ? '#88d18a' : ''"
                              :icon="item.order_status === '3' ? 'el-icon-check' : ''"
                              :timestamp="item.actual_time === '3' ? item.eta_time : '...' ">
              到达目的地
            </el-timeline-item>
            <el-timeline-item size="large"
                              timestamp="...">
              财务核算
            </el-timeline-item>
          </el-timeline>
        </el-card>
        <div v-if="original === 2">
          <div id="amap2"></div>
          <div class="input-item">
            <input type="button"
                   class="btn"
                   value="开始动画"
                   id="start"
                   @click="startAnimation()" />
            <input type="button"
                   class="btn"
                   value="暂停动画"
                   id="pause"
                   @click="pauseAnimation()" />
            <input type="button"
                   class="btn"
                   value="继续动画"
                   id="resume"
                   @click="resumeAnimation()" />
            <input type="button"
                   class="btn"
                   value="停止动画"
                   id="stop"
                   @click="stopAnimation()" />
          </div>
        </div>
        <div v-if="original === 0 || original === 1">
          <div class="amap2-text"
               v-if="original === 0|| original === 1">
            <img class="amap2-img"
                 src="../../assets/img/map.png"
                 alt="空空如也">
            空空如也~~~
          </div>
        </div>

      </div>
    </div>
  </div>

  <!-- <div id="amap">
      <el-amap vid="amap" class="amap" :center="center" :plugin="plugin">
        <el-amap-marker vid="component-marker" :position="position" />
      </el-amap>
    </div> -->

</template>
<script>
export default {
  name: "map",
  data () {
    return {
      // 订单传过来的item
      item: {},
      //若直接点进来的
      original: 0,
      // 搜索
      searchinput: '',
      position: [116.481485, 39.990464], // 定位
      center: [116.481485, 39.990464],   // 地图初始化视图中心点
      plugin: [                          // 这里放扩展的插件
        {
          pName: 'Scale',                // 比例尺
          events: {
            init (instance) {
              console.log(instance);
            }
          }
        }
      ],
      map: null,
      marker: null,
      lineArr: [
        ["113°41'23", "22°38'97"],
        ["113°43'89", "22°35'44"],
        ["113°44'90", "22°24'13"],
        ["113°50'12", "22°11'82"],
        ["113°50'72", "22°07'82"],
        ["113°52'41", "21°57'65"],
        ["113°52'72", "21°48'36"],
        ["114°00'05", "21°46'46"],
        ["114°09'05", "21°53'46"],
        ["114°13'75", "21°56'65"],
        ["114°33'70", "22°12'44"],
        ["115°38'85", "22°20'85"],
        ["116°39'33", "22°39'27"],
        ["118°40'62", "24°20'37"],
        ["119°83'96", "25°45'39"],
        ["120°49'49", "26°29'26"],
        ["122°21'77", "28°34'49"],
        ["123°15'66", "30°47'34"],
        ["123°15'33", "37°27'44"],
        ["120°48'66", "38°35'72"],
        ["118°36'66", "38°49'69"],
        ["117°48'87", "38°59'74"]
      ],
      MapArr: [],
      MapArr1: [],
      MapArr2: []
    };
  },
  created () {
    this.item = this.$route.params.item
    console.log("订单信息", this.item)
    if (this.item === "" || this.item === undefined) {
      this.original = 0
    } else if (this.item.order_status === null || this.item.order_status === '0' || this.item.order_status === '1') {
      this.original = 1
    } else if (this.item.order_status === '2' || this.item.order_status === '3') {
      this.original = 2
    }
    // 对地图轨迹数据进行写死的处理
    for (let i = 0; i < this.lineArr.length; i++) {
      this.MapArr.push([this.utils.changeToDu(this.lineArr[i][0]), this.utils.changeToDu(this.lineArr[i][1])])
    }
    // 取前10个作为已走路程
    this.MapArr1 = this.MapArr.slice(0, Math.ceil(this.MapArr.length / 2) + 1)
    // 取后面的作为未走路程
    this.MapArr2 = this.MapArr.slice(Math.ceil(this.MapArr.length / 2), this.MapArr.length)
    // this.initMap();

  },
  mounted () {

    if (this.original === 2) {
      console.log('执行了mounted');
      this.initMap();
    }

    // if(this.item === "" || this.item === undefined){
    //   console.log('为空')
    //   this.original = 1
    // }
    // this.search()
  },
  // beforeDestroy () {
  //   this.map && this.map.destroy();
  // },
  methods: {
    initMap () {
      console.log('创建地图');
      this.map = new AMap.Map("amap2", {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 17
      });

      this.marker = new AMap.Marker({
        map: this.map,
        // position: [116.478935, 39.997761],
        position: this.MapArr[Math.ceil(this.MapArr.length / 2)],
        icon: require("../../assets/img/sea.png"),
        offset: new AMap.Pixel(-26, -15),
        autoRotation: true,
        angle: -90
      });

      // 绘制已走轨迹
      let polyline = new AMap.Polyline({
        map: this.map,
        path: this.MapArr1,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });
      // 绘制未走轨迹
      let polyline2 = new AMap.Polyline({
        map: this.map,
        path: this.MapArr2,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 3,//线宽
        strokeStyle: "dashed"  //线样式
      });
      let passedPolyline = new AMap.Polyline({
        map: this.map,
        // path: this.lineArr,
        strokeColor: "#AF5", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });

      this.marker.on("moving", function (e) {
        passedPolyline.setPath(e.passedPath);
      });

      this.map.setFitView();
    },
    startAnimation () {

      this.marker.moveAlong(this.MapArr1, 200000);
    },
    pauseAnimation () {
      this.marker.pauseMove();
    },
    resumeAnimation () {
      this.marker.resumeMove();
    },
    stopAnimation () {
      this.marker.stopMove();
    },
    // 搜索
    search () {
      console.log(this.searchinput)
      if (this.searchinput !== '') {
        const api = `mapsearch?users_id=${this.$store.getters.userinfo.users_id}&product_name=${this.searchinput}`
        this.$axios.get(api)
          .then(res => {
            console.log('搜索结果', res.data)
            if (res.data === false) {
              this.$message({
                type: 'warning',
                message: '无权访问'
              })
            }
            this.item = res.data
            if (this.item === "" || this.item === undefined) {
              this.original = 0
            } else if (this.item.order_status === null || this.item.order_status === '0' || this.item.order_status === '1') {
              this.original = 1
            } else if (this.item.order_status === '2' || this.item.order_status === '3') {
              this.original = 2
              this.initMap()
            }
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        this.$message({
          type: 'warning',
          message: '搜索不能为空'
        });
      }
    },
    timeline_color (item) {
      let color
      if (item.actual_time === null) {
        color = ''
        this.timeline_icon = ''
      } else if (item.order_status === '2') {
        color = '#7db9ff'
        this.timeline_icon = 'el-icon-more'
      } else if (item.order_status === '3') {
        color = '#88d18a'
        this.timeline_icon = 'el-icon-check'
      }
      return color
    }
  }
}
</script>

<style >
.banner {
  color: #fff;
  font-size: 30px;
  height: 190px;
  line-height: 190px;
  background-image: url("../../assets/img/banner_2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

.main {
  width: 60%;
  margin: 20px auto;
}
/* 顶部 */

.top {
  display: flex;
  justify-content: center;
  /*align-items: center;*/
}
.box-card1 {
  width: 100%;
  border-radius: 10px;
}
.header_text {
  font-size: 18px;
  color: #4198c7;
  font-weight: 600;
  padding-left: 20px;
}
.el-input {
  width: 82%;
  padding-left: 600px;
  padding-right: 10px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
/* 底部 */
.foot {
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  padding: 20px 0;
}

.amap2-text {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: rgb(144, 143, 143);

  width: 700px;
  height: 700px;
  /* border: 3px solid rgb(0, 0, 0); */
  border-radius: 10px;
  margin-left: 20px;
}
.amap2-img {
  position: relative;
  left: 20%;
}
.box-card2 {
  width: 100%;
  border-radius: 10px;
}
.timeline {
  padding-left: 40%;
  padding-top: 20%;
  font-size: 18px;
}
.el-timeline-item {
  padding-bottom: 60px;
}

#amap {
  width: 600px;
  height: 600px;
  border: 3px solid red;
}
#amap2 {
  width: 700px;
  height: 700px;
  /* border: 3px solid rgb(0, 0, 0); */
  border-radius: 10px;
  margin-left: 20px;
}

.input-item {
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
.btn {
  margin-right: 20px;
}
</style>
